<template>
  <div class="loginout">
    <div class="page-header">
      <div class="clearfix">
        <div class="page-header-ico">
          <img src="@/common/image/bitahub-log-ico-hover.png" alt="">
        </div>
        <span>找回密码</span>
        <p>
          <span @click="toRegister">注册</span> | <span @click="toLogin">登录</span>
        </p>
      </div>
    </div>
    <div class="loginoutbox">
      <div class="loginoutbox-content">
        <div class="page-con" v-show="internalJudge">
          <el-form :model="loginoutform" :rules="rulesloginoutform" status-icon ref="loginoutform" class="loginoutform" @submit.native.prevent>
            <el-form-item prop="loginOutEmail">
              <!--<p>请输入亲注册时填写的邮箱地址</p>-->
              <el-input v-model="loginoutform.loginOutEmail" autocomplete="off" class="login-out-email-con" placeholder="输入Email"></el-input>
            </el-form-item>
            <el-form-item class="submitbtn">
              <el-button type="primary" class="login-out-email-sub" @click="submitLoginOutForm('loginoutform')">下一步</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!---->
        <div class="page-con-restart" v-show="!internalJudge">
          <el-form :model="loginrestartform" :rules="rulesloginrestartform" status-icon ref="loginrestartform" class="loginrestartform" @submit.native.prevent>
            <el-form-item prop="loginRestartEmail">
              <el-input v-model="loginrestartform.loginRestartEmail" class="login-restart-email-con" maxlength="6" autocomplete="off" placeholder="请输入邮箱验证码" @keyup.native="provingnum"></el-input>
            </el-form-item>
            <el-form-item prop="loginRestartPassword">
              <el-input type="password" v-model="loginrestartform.loginRestartPassword" autocomplete="off" maxlength="20" class="login-restart-password-con" placeholder="请重新设置密码"></el-input>
            </el-form-item>
            <el-form-item prop="loginRestartPasswords">
              <el-input type="password" v-model="loginrestartform.loginRestartPasswords" autocomplete="off" maxlength="20" class="login-restart-passwords-con" placeholder="请确认密码"></el-input>
            </el-form-item>
            <el-form-item class="submitbtn">
              <el-button type="primary" class="login-restart-passwords-sub" @click="submitLoginRestartForm('loginrestartform')">完成</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sendCode, changePassword } from '@/api/loginout'

export default {
  data () {
    const validatePass = (rule, value, callback) => {
      const reg = /^[\S]{6,20}$/
      const regs = /^([-,.?:;'"!']|[\w])+$/
      const regss = /(?!^(\d+|[a-zA-Z]+|[-,.?:;'"!']+)$)^[\w-,.?:;'"!']+$/
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!reg.test(value)) {
        callback(new Error('密码长度须是6到20个字符之间'))
      } else if (!regs.test(value)) {
        callback(new Error('密码只能包含字母、数字及标点符号'))
      } else if (!regss.test(value)) {
        callback(new Error('字母、数字和标点符号至少包含两种'))
      } else {
        if (this.loginrestartform.loginRestartPasswords !== '') {
          this.$refs.loginrestartform.validateField('loginRestartPasswords')
        }
        callback()
      }
    }
    const validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'))
      } else {
        if (/^[0-9]+$/.test(this.loginrestartform.loginRestartEmail)) {
          callback()
        } else {
          callback(new Error('请输入数字!'))
        }
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.loginrestartform.loginRestartPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      internalJudge: true,
      loginoutform: {
        loginOutEmail: ''
      },
      rulesloginoutform: {
        loginOutEmail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ]
      },
      loginrestartform: {
        loginRestartEmail: '',
        loginRestartPassword: '',
        loginRestartPasswords: ''
      },
      rulesloginrestartform: {
        // loginRestartEmail: [
        // { required: true, message: '请输入邮箱验证码', trigger: 'blur' },
        // { type: 'number', message: '请输入数字', trigger: 'blur' }
        // ],
        loginRestartEmail: [
          { validator: validateEmail, trigger: 'blur' }
        ],
        loginRestartPassword: [
          { validator: validatePass, trigger: 'blur' }
        ],
        loginRestartPasswords: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    provingnum () {
      this.loginrestartform.loginRestartEmail = this.loginrestartform.loginRestartEmail.replace(/[^0-9]/g, '')
    },
    toRegister () {
      window.open(`${process.env.VUE_APP_BITA_REGISTER}`)
    },
    toLogin () {
      this.$router.push({ path: '/login' })
    },
    submitLoginOutForm (loginoutform) {
      this.$refs[loginoutform].validate((valid) => {
        if (valid) {
          this.LoginOutFun()
        } else {
          return false
        }
      })
    },
    submitLoginRestartForm (loginrestartform) {
      this.$refs[loginrestartform].validate((valid) => {
        if (valid) {
          this.LoginRestartFun()
        } else {
          return false
        }
      })
    },
    /*
      -----接口-----
    */
    LoginOutFun () {
      let parameter = `?email=${this.loginoutform.loginOutEmail}`
      sendCode(parameter).then(res => {
        if (res.code === 0) {
          this.$message({ message: '已发送验证码！', showClose: true, type: 'success' })
          this.internalJudge = false
        } else {
          this.$message({ message: '输入的邮箱号不正确！', showClose: true, type: 'error' })
        }
      })
    },
    LoginRestartFun () {
      let parameter = `?email=${this.loginoutform.loginOutEmail}&identifyCode=${this.loginrestartform.loginRestartEmail}&password=${this.loginrestartform.loginRestartPassword}`
      changePassword(parameter).then(res => {
        if (res.code === 0) {
          this.$message({ message: '恭喜你，修改成功！', showClose: true, type: 'success' })
          this.$router.push({ path: '/login' })
        } else {
          this.$message({ message: '验证码不正确', showClose: true, type: 'error' })
        }
      })
    }
  }
}
</script>

<style lang="stylus">
loginBorderGray = 1px solid #999999
.clearfix:after
  content ''
  height 0
  line-height 0
  display block
  visibility hidden
  clear both
.loginout
  width 100%
  height 100%
  position relative
  top 0
  left 0
  .page-header
    width 100%
    height 68px
    display flex
    align-items center
    background #2196F3
    >div
      width 1200px
      margin 0 auto 0
      color #B1DBFA
      >.page-header-ico
        width 107px
        height 21px
        font-size 0
        margin-right 54px
        float left
        >img
          width 100%
          height 100%
      >span
        float left
        font-size 14px
        line-height 20px
        padding 4px 0 1px
      >p
        float right
        padding 4px 0 1px
        font-size 14px
        line-height 20px
        >span
          cursor pointer
  .loginoutbox
    width 100%
    position absolute
    top 68px
    bottom 0px
    .loginoutbox-content
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)
    .page-con,.page-con-restart
      width 360px
      padding 0 30px
      .el-form-item
        margin-bottom 25px
      .login-out-email-con,.login-restart-email-con,.login-restart-password-con,.login-restart-passwords-con
        height 40px
        line-height 40px
        font-size 14px
        color #CCCCCC
        border-radius 3px
      .login-out-email-sub,.login-restart-passwords-sub
        width 100%
        height 40px
        line-height 40px
        background #2196F3
        font-size 14px
        color #FFFFFF
        padding 0
        border-radius 3px
</style>
